export const addNavMenu = (editor) => {
    const { Components } = editor;
    Components.addType('navMenu', {
        model: {
            defaults: {
                name: 'navMenu',
                droppable: false,
                attributes: { class: '' },
                components: [
                    {
                        type: 'div',
                        attributes: { class: 'NavMenu-card-wrapper' },
                        components: [
                            {
                                type: 'div',
                                attributes: { style: 'display: flex;' },
                                components: [
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav active' },
                                        content: '首页'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '产品中心'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '咨询服务'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '解决方案'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '客户案例'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '咨询中心'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '直播'
                                    },
                                ]
                            },
                            {
                                type: 'text',
                                attributes: { class: 'content' },
                                content: '0'
                            },
                        ],
                    },
                ],
                script() {
                    var navs = document.getElementsByClassName('nav')
                    var contents = document.getElementsByClassName('content')
                    for (let i = 0; i < navs.length; i++) {
                        navs[i].onclick = function () {
                            for (let j = 0; j < navs.length; j++) {
                                navs[j].style.color = 'black';
                                navs[j].style.border = 'none';
                            }
                            if (contents.length > 0) {
                                contents[0].innerHTML = i;
                            }
                            navs[i].style.color = '#5b7de2';
                            navs[i].style.borderBottom = '2px solid #5b7de2';
                        }
                    }
                },
                styles: `
                  .NavMenu-card-wrapper{
                  border: 1px solid gray;height:1000px;width:80%;margin-left: 10%;margin-right: 10%;
              }
              .content {
                  text-align: center;
              }
              .content.active {
                  display: block;
              }
              div button:hover {
                  color: #5b7de2;
              }
              .nav.active{
                  color: #5b7de2;
                  border-bottom: 2px solid #5b7de2;
              }
              .nav {
                  padding-top: 8px;
                  text-align: center;
                  align-items: center;
                  height: 40px;
                  width: 100px;
                  font-weight: 600;
                  background-color: #fff;
                  border: none;
                  cursor: pointer;
              }
              `,
            },
        },
    });
    editor.BlockManager.add("navMenu", {
        label: "导航菜单",
        category: "组件类",
        select: true,
        content: { type: "navMenu" },
      });
};
